<template>
    <div class="car">
        <h2>一辆{{ car.brand }}车,价值{{ car.price }}万</h2>
        <button @click="changePrice">修改汽车价格</button>
        <hr>
        <h2>相关推荐</h2>
        <ul>
            <li v-for="item in brand" :key="item.id">{{ item.name }},{{ item.price }}</li>
        </ul>
        <button @click="changeFirCar">修改第一个汽车名字</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'car'
    }
</script>

<script lang="ts" setup>
    import { reactive } from 'vue';
    // 引入数据
    let car = reactive({
        brand: '奔驰',
        price: 100
    })
    let brand = reactive([
        {id:'daefasdf01',name:'奔驰',price:100},
        {id:'daefasdf02',name:'宝马',price:200},
        {id:'daefasdf03',name:'奥迪',price:300}
    ])
    function changePrice(){
        car.price += 10
    }
    function changeFirCar(){
        brand[0].name = '奇瑞'
    }
</script>